<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>狗盖猫</title>
    <style>
*{margin: 0;

padding: 0;}
div{
    perspective: 300px;
    width: 200px;
    height: 200px;
    margin: 10px auto;
    position: relative;
  
    
}
div .cat{
    border: 1px solid black;
    border-radius: 50% ;
    width: 200px;
    height: 200px;
}
 div .dog{
    position: absolute;
    width: 200px;
    height: 200px;
    top:0;
    left:0;
    transition: all 1s linear 0s;
    transform-origin: 0% 0%;
    border: 1px solid black;
    border-radius: 50% ;
}
.dog:hover{
    transform: rotateY(-180deg);
}
 div .d1{
    transform-origin: 100% 100%;
}
  div .d1:hover{
    transform: rotateY(180deg)
 
}
div .d2{
    transform-origin: 0% 0%;
}
div .d2:hover{
    transform: rotateX(180deg);
}
div .d3{
    transform-origin: 100% 100%;
}
div .d3:hover{
    transform: rotateX(-180deg);
}
    </style>
</head>
<body>
    <div>
        <img class="cat" src="image/cat.jpg" alt="">
        <img class="dog" src="image/dog.jpg" alt="">
    </div>
    <div>
        <img class="cat c1" src="image/cat.jpg" alt="">
        <img class="dog d1" src="image/dog.jpg" alt="">
    </div>
    <div>
        <img class="cat c2" src="image/cat.jpg" alt="">
        <img class="dog d2" src="image/dog.jpg" alt="">
    </div>
    <div>
        <img class="cat c3" src="image/cat.jpg" alt="">
        <img class="dog d3" src="image/dog.jpg" alt="">
    </div>
</body>
</html>